<!--
    这是个人中心首页，先是上下结构，下面部分是左右结构（点击左边链接，在右边打开页面内容）
-->
<template>
    <el-container>
        <el-header>
            <div class="boxwidth">
                <PageHeader />
            </div>
        </el-header>
        <el-container class="box boxwidth">
            <el-aside width="200px">                
                <!--
                    点击下面的子菜单链接，会在右边打开，这里用到子菜单。所以需要配置子菜单路由
                -->
                <div style="min-height:200px;">
                    <div>头像</div>
                    <div>昵称</div>
                    <div>
                        <router-link to="/center/myinfo">我的信息</router-link>
                    </div>
                    <div>
                        <router-link to="/center/myorder">我的订单</router-link>
                    </div>
                    <div>
                        <router-link to="/center/myaddress">我的地址</router-link>
                    </div>
                    <div>
                        <button @click="clear">退出登录</button>
                    </div>
                </div>
            </el-aside>
            <el-main>
                <div style="margin:30px;background-color: #fff; border-radius: 10px;">
                <!--
                    指定了子路由的情况下，一定要告诉子路由，在哪里显示  router-view
                -->
                <router-view />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
export default {
    components:{
        PageHeader
    },
    methods:{
        //退出登录，清除缓存
    clear(){
      localStorage.removeItem('ph5userinfo')
            
      this.$router.push('/center/login')

    },
    }
}
</script>

<style scoped>

header{
    background-color: antiquewhite;
}

aside{
    background-color: aquamarine;
}
main{
    /* background-color: blueviolet; */
}



</style>